<template>
  <div>
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
       v-dialogDrag
      :visible.sync="visible">
      <el-form size="small" v-loading="loading" label-width="120px">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
          </el-checkbox-group>
     </el-form>
     <span slot="footer" class="dialog-footer">
       <el-button size="small" @click="visible = false">关闭</el-button>
       <el-button size="small" type="primary" @click="doSubmit()" v-noMoreClick>确定</el-button>
     </span>
     </el-dialog>
     </div>
</template>

<script>
  /*
    过滤数据vue组件
    作者：刘明星
    功能: 过滤数据(需要传入简单数组)
    样式: 样式采用多选
    标注: 简单数组在formatShift.js中有解释
  */
  export default {
    data () {
      return {
        title: '',
        visible: false,
        loading: false,
        checkAll: false,
        checkedCities: [],
        cities: [],
        isIndeterminate: true
      }
    },
    methods: {
      init (value) {
        this.cities = value
        this.title = '导出表头'
        this.visible = true
      },
      handleCheckAllChange (val) {
        this.checkedCities = val ? this.cities : []
        this.isIndeterminate = false
      },
      handleCheckedCitiesChange (value) {
        let checkedCount = value.length
        this.checkAll = checkedCount === this.cities.length
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
      },
      doSubmit () {
        this.loading = true
        this.$emit('returnFilterData', this.checkedCities)
        this.loading = false
        this.visible = false
      }
    }
  }
</script>

<style>
</style>
